<nz-card [nzBodyStyle]="{ padding: '10px 24px' }" [nzBordered]="false">
  <div class="left-start-center">
    <nz-breadcrumb>
      <nz-breadcrumb-item>首页</nz-breadcrumb-item>
      <nz-breadcrumb-item>Dashboard</nz-breadcrumb-item>
      <nz-breadcrumb-item>分析页</nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
</nz-card>

<section class="content-wrap">
  <section class="ant-row" nz-row [nzGutter]="[32, 16]">
    <div nz-col [nzLg]="12" [nzMd]="12" [nzSm]="12" [nzXl]="6" [nzXs]="24" [nzXXl]="6">
      <div class="card-wrap">
        <nz-card [nzBodyStyle]="cardPadding" [nzBordered]="false">
          <div class="card-top">
            <div class="title">总销售额</div>
            <div class="number">￥126,560</div>
            <i nz-icon nz-tooltip nzTheme="outline" nzTooltipTitle="指标说明" nzType="info-circle"></i>
          </div>
          <div class="card-mid">
            <div class="mid-text">
              <span>
                日同比 11%
                <i nz-icon nzTheme="outline" nzType="caret-down" style="color: green; font-size: 12px"></i>
              </span>
            </div>
            <div class="mid-text">
              <span>
                周同比 12%
                <i nz-icon nzTheme="outline" nzType="caret-up" style="color: red; font-size: 12px"></i>
              </span>
            </div>
          </div>
          <nz-divider class="m-0"></nz-divider>
          <div class="card-footer">日销售额 ￥12,423</div>
        </nz-card>
      </div>
    </div>
    <div nz-col [nzLg]="12" [nzMd]="12" [nzSm]="12" [nzXl]="6" [nzXs]="24" [nzXXl]="6">
      <div class="card-wrap">
        <nz-card [nzBodyStyle]="cardPadding" [nzBordered]="false">
          <div class="card-top">
            <div class="title">访问量</div>
            <div class="number">8,846</div>
            <i nz-icon nz-tooltip nzTheme="outline" nzTooltipTitle="指标说明" nzType="info-circle"></i>
          </div>
          <div class="card-mid">
            <div id="miniArea"></div>
          </div>
          <nz-divider class="m-0"></nz-divider>
          <div class="card-footer">日访问量 1,234</div>
        </nz-card>
      </div>
    </div>
    <div nz-col [nzLg]="12" [nzMd]="12" [nzSm]="12" [nzXl]="6" [nzXs]="24" [nzXXl]="6">
      <div class="card-wrap">
        <nz-card [nzBodyStyle]="cardPadding" [nzBordered]="false">
          <div class="card-top">
            <div class="title">支付笔数</div>
            <div class="number">6,560</div>
            <i nz-icon nz-tooltip nzTheme="outline" nzTooltipTitle="指标说明" nzType="info-circle"></i>
          </div>
          <div class="card-mid">
            <div id="miniBar"></div>
          </div>
          <nz-divider class="m-0"></nz-divider>
          <div class="card-footer">转化率 60%</div>
        </nz-card>
      </div>
    </div>
    <div nz-col [nzLg]="12" [nzMd]="12" [nzSm]="12" [nzXl]="6" [nzXs]="24" [nzXXl]="6">
      <div class="card-wrap">
        <nz-card [nzBodyStyle]="cardPadding" [nzBordered]="false">
          <div class="card-top">
            <div class="title">运营活动效果</div>
            <div class="number">78%</div>
            <i nz-icon nz-tooltip nzTheme="outline" nzTooltipTitle="指标说明" nzType="info-circle"></i>
          </div>
          <div class="card-mid">
            <div id="progress"></div>
          </div>
          <nz-divider class="m-0"></nz-divider>
          <div class="card-footer">日销售额 ￥12,423</div>
        </nz-card>
      </div>
    </div>
  </section>

  <section class="flow-wrap m-t-20">
    <nz-card [nzBodyStyle]="{ padding: 0 }" [nzBordered]="true">
      <nz-tabs [nzAnimated]="false" [nzTabBarExtraContent]="extraTemplate" [nzTabBarStyle]="{ padding: '0 10px', fontSize: '16px' }">
        <nz-tab nzTitle="销售额">
          <div nz-row>
            <div nz-col [nzLg]="12" [nzMd]="13" [nzSm]="24" [nzXl]="17" [nzXs]="24">
              <h3 class="p-l-35">销售趋势</h3>
              <div id="histogram"></div>
            </div>
            <div nz-col [nzLg]="12" [nzMd]="11" [nzSm]="24" [nzXl]="7" [nzXs]="24">
              <h3 class="p-l-35 m-b-20">门店销售额排名</h3>
              @for (item of 7 | numberLoop; track $index) {
                <div class="rank-list" title="工专路 {{ $index + 1 }} 号店">
                  <div class="center">
                    <nz-badge [nzCount]="$index + 1" [nzStyle]="{ background: $index < 4 ? '#314659' : '#fafafa', color: $index < 4 ? '#fff' : 'black' }"></nz-badge>
                    <span class="m-l-5">工专路 {{ $index + 1 }} 号店</span>
                  </div>
                  <div>323,234</div>
                </div>
              }
            </div>
          </div>
        </nz-tab>
        <nz-tab nzTitle="访问量">
          <h3>❤❤❤❤等待你的pr❤❤❤❤</h3>
        </nz-tab>
      </nz-tabs>
    </nz-card>

    <ng-template #extraTemplate>
      <nz-radio-group nzSize="small">
        <label nz-radio-button nzValue="A">今日</label>
        <label nz-radio-button nzValue="B">本周</label>
        <label nz-radio-button nzValue="C">本月</label>
        <label nz-radio-button nzValue="D">全年</label>
      </nz-radio-group>
      <nz-range-picker *appScreenLessHidden="620" class="m-l-20"></nz-range-picker>
    </ng-template>
  </section>

  <section class="m-t-20" nz-row [nzGutter]="[16, 0]">
    <div class="hot-search-wrap" nz-col nzSpan="12" [nzLg]="12" [nzMd]="24" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
      <nz-card [nzBodyStyle]="{ height: '500px' }" [nzExtra]="hotExtra" [nzTitle]="'线上热门搜索'">
        <div class="search-wrap" nz-row>
          <div class="search-block" nz-col [nzLg]="12" [nzMd]="12" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
            <div>
              <div>
                <span nz-typography nzType="secondary">
                  搜索用户数
                  <i nz-icon nz-tooltip nzTheme="outline" nzTooltipTitle="指标说明" nzType="info-circle"></i>
                </span>
              </div>
              <div>
                <h3 class="d-i-b m-r-30" nz-typography>12,321</h3>
                <span>
                  17.1
                  <i nz-icon nzTheme="outline" nzType="caret-up" style="color: red; font-size: 12px"></i>
                </span>
              </div>
            </div>
            <div id="searchUserChart"></div>
          </div>
          <div class="search-block" nz-col [nzLg]="12" [nzMd]="12" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
            <div>
              <div>
                <span nz-typography nzType="secondary">
                  人均搜索次数
                  <i nz-icon nz-tooltip nzTheme="outline" nzTooltipTitle="指标说明" nzType="info-circle"></i>
                </span>
              </div>
              <div>
                <h3 class="d-i-b m-r-30" nz-typography>12,321</h3>
                <span>
                  17.1
                  <i nz-icon nzTheme="outline" nzType="caret-up" style="color: red; font-size: 12px"></i>
                </span>
              </div>
            </div>
            <div id="searchUserAvgChart"></div>
          </div>
          <nz-table #sortTable class="m-t-25" nzSize="small" nzTableLayout="fixed" [nzData]="listOfData">
            <thead>
              <tr>
                @for (column of listOfColumn; track column) {
                  <th [nzSortFn]="column.compare" [nzSortPriority]="column.priority">{{ column.title }}</th>
                }
              </tr>
            </thead>
            <tbody>
              @for (data of sortTable.data; track data) {
                <tr>
                  <td>{{ data.name }}</td>
                  <td>{{ data.chinese }}</td>
                  <td>{{ data.math }}</td>
                  <td>{{ data.english }}</td>
                </tr>
              }
            </tbody>
          </nz-table>
        </div>
      </nz-card>
      <ng-template #hotExtra>
        <a>More</a>
      </ng-template>
    </div>
    <div class="pipe-wrap" nz-col nzSpan="12" [nzLg]="12" [nzMd]="24" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
      <nz-card [nzBodyStyle]="{ height: '500px' }" [nzTitle]="'销售额类别占比'">
        <h4>销售额</h4>
        <div id="ringPie"></div>
      </nz-card>
    </div>
  </section>

  <!--等待你的pr-->
  <!--  <section class="m-t-20">
      <nz-card>
        <nz-tabs>
          <ng-container *ngFor="let i of 51|numberLoop">
            <nz-tab [nzTitle]="tabTitle">
              ❤❤❤❤等待你的pr❤❤❤❤
            </nz-tab>
          </ng-container>
        </nz-tabs>
        <ng-template #tabTitle>
          <div class="bottom-block-tab-wrap">
            <div class="tab-title">stores 0</div>
            <div class="tab-pipe-wrap">
              <div>
                <div>转化率</div>
                <div>90%</div>
              </div>
              <div>
                <div id="miniRing"></div>
              </div>
            </div>
          </div>
        </ng-template>
      </nz-card>

    </section>-->
</section>
